---
title: "这个网站是如何生成的"
date: 2019-3-10
categories:
- journal
tags:
---

<div id="content">
<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#orgb46fe5b">Intro</a></li>
<li><a href="#org677709b">单个文件的导出</a></li>
<li><a href="#org3f62233">批量导出</a></li>
<li><a href="#orgda0bb9d">解决源文件中图片路径</a></li>
<li><a href="#org76da8ec">hexo tag</a></li>
<li><a href="#orga434bd9">Category</a></li>
<li><a href="#org1bfc2f1"><span class="todo TODO">TODO</span> </a></li>
</ul>
</div>
</div>
<div class="outline-2" id="outline-container-orgb46fe5b">
<h2 id="orgb46fe5b">Intro</h2>
<div class="outline-text-2" id="text-orgb46fe5b">
<p>
用emacs“编辑”这些笔记倒是挻方便，但是只是“查看”的话就…
</p>
<p>
我想让这些笔记，方便自己查看，不需要其他的查看器，不能有登录，一键直达的那种。
所以想到了用网页的方式。Github pages之类的也能免费托管静态站点，但是github的访问并不流畅，用国内的托管好点。
</p>
</div>
</div>
<div class="outline-2" id="outline-container-org677709b">
<h2 id="org677709b">单个文件的导出</h2>
<div class="outline-text-2" id="text-org677709b">
<p>
言归正传，首先是单个文件的导出，当然用的是html export back end: {% raw %} org-html-export-to-html {% endraw %} 啦。
然后一个html文件就在org所在目录导出好了。有样式，有目录。
但是整个页面有点单调，如果直接挂到网站上，一般人怕是没有阅读欲望。都挂在公网上了，万一有访客呢，既然要做，那就做好点。
</p>
<p>
有很多用于生成个人博客的应用，随便选一个例如hexo。把它生成好的页面挂上去就不辣眼了。
</p>
</div>
</div>
<div class="outline-2" id="outline-container-org3f62233">
<h2 id="org3f62233">批量导出</h2>
<div class="outline-text-2" id="text-org3f62233">
<p>
然后是文件的批量导出，用的是脚本解决：遍历目录下的所有文件，调用 
</p>
<div class="org-src-container">
<pre class="src src-sh">emacs $<span style="font-weight: bold; font-style: italic;">fname</span> --batch -l  init_file, -f org-html-export-to-html -kill
</pre>
</div>
<p>
最开始用的是这种方式，但是emacs反复启动，很费时。后来改用emacs的daemon模式：
</p>
<div class="org-src-container">
<pre class="src src-sh"><span style="font-weight: bold; font-style: italic;"># </span><span style="font-weight: bold; font-style: italic;">Start emacs daemon</span>
emacs --daemon -l config.emacs <span style="font-weight: bold; font-style: italic;"># </span><span style="font-weight: bold; font-style: italic;">start daemon</span>
<span style="font-weight: bold; font-style: italic;"># </span><span style="font-weight: bold; font-style: italic;">Using emacsclient to do exporting</span>
emacsclient -e (progn (find-file $<span style="font-weight: bold; font-style: italic;">fname</span>) (org-html-export-to-html) (kill-buffer))
</pre>
</div>
</div>
</div>
<div class="outline-2" id="outline-container-orgda0bb9d">
<h2 id="orgda0bb9d">解决源文件中图片路径</h2>
<div class="outline-text-2" id="text-orgda0bb9d">
<p>
然后要解决org文件中引入的图片等文件的路径。
我将资源文件放在org文件同名的隐藏目录中了，大概是这样的
</p>
<pre class="example">
├── file.org # org文件引用资源文件，用相对路径
├──.file/ # 隐藏文件，它也不会在neotree中显示了
    ├── jpg.jpg
    ├── png.png
</pre>
<p>
而hexo生成的页面结构（默认）是：
</p>
<pre class="example">
├── file
    ├── index.html
</pre>
<p>
所以，我需要在生成完毕之后，将资源文件移动到对应的目录下。
然后是文件中的路径，源文件是 {% raw %} ./.file/jpg.jgp {% endraw %} 这样引用资源文件的。而在生成后的文件中需要改成 {% raw %} ./jgp.jgp {% endraw %} 。
用的python beautifulsoup处理生成后的html文档：寻找img之类的标签，替换其中的src。
</p>
</div>
</div>
<div class="outline-2" id="outline-container-org76da8ec">
<h2 id="org76da8ec">hexo tag</h2>
<div class="outline-text-2" id="text-org76da8ec">
<p>
还是beautifulsoup，收集页面中所有 class=tag 的span，然后插入到生成好的html的开始处，以 master-frontend 的语法。
</p>
</div>
</div>
<div class="outline-2" id="outline-container-orga434bd9">
<h2 id="orga434bd9">Category</h2>
<div class="outline-text-2" id="text-orga434bd9">
<p>
用源文件的目录结构作为category，脚本批处理的时候，将源文件的路径作为category，在生成的html开始处插入master-frontend。
</p>
<p>
但是这个默认的主题，category不是树形结构，还得自己魔改下，在主题所在目录的 {% raw %} layout/_widget/category.ejs {% endraw %} 文件中，改下源代码。效果好丑，不是前端没法了。
</p>
</div>
</div>
<div class="outline-2" id="outline-container-org1bfc2f1">
<h2 id="org1bfc2f1"><span class="todo TODO">TODO</span> </h2>
<div class="outline-text-2" id="text-org1bfc2f1">
<ul class="org-ul">
<li>如果会lisp，自定义html-backend</li>
<li>某些图片引用路径错误</li>
<li>有的plantuml生成失败</li>
<li>Publishing time of htmls, is build time but not 'org create time'</li>
<li>Code highlight</li>
</ul>
</div>
</div>
</div>
<div class="status" id="postamble">
<p class="date">Date: 2019-3-10</p>
<p class="author">Author: gdme1320</p>
<p class="validation"><a href="http://validator.w3.org/check?uri=referer">Validate</a></p>
</div>
